
/* Colors */
$color1: #868e96;
$color2: #ec7b1a;
$color3: #dc5332;
$color4: #55acee;
$black: #000;

.color-1 {
  color: $color1;
  fill: $color1;
  stroke: $color1;
}

.color-2 {
  color: $color2;
  fill: $color2;
  stroke: $color2;
}

.color-3 {
  color: $color3;
  fill: $color3;
  stroke: $color3;
}

.color-4 {
  color: $color4;
  fill: $color4;
  stroke: $color4;
}

.color-5 {
  color: #847575;
  fill: #847575;
  stroke: #847575;
}

/** Radar **/
.ledge-tech-radar{
  /* Disable some webkit features to make the radar feel more native */
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: 1fr 1fr;
}

#radarChart {
  display: inline-block;
  grid-column: 1 /span 2;
  width: 100%;
  height: 100%
}

/* swap the last to legends as they run clockwise around the circle */
.ledge-tech-radar> .legend-2 {
  grid-row: 3;
  grid-column: 2;
}

.ledge-tech-radar> .legend-3 {
  grid-row: 3;
  grid-column: 1;
}

.tech-circle text,
.tech-circle circle {
  cursor: pointer;
  font-size: 0.8em;
  transition: 0.25s ease-in-out;
}

.tech-circle.active text,
.tech-circle.active circle {
  transform: scale(2);
  font-size: 1.2em;
}

@media (min-width: 1000px) {
  .ledge-tech-radar{
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  #radarChart {
    grid-row: 1 / span 2;
    grid-column: 2;
    justify-self: center;
    align-self: center;
  }

  .legend li.active a {
    color: $black;
  }

  .ledge-tech-radar> .legend-0 {
    grid-column: 1;
    grid-row: 1;
  }

  .ledge-tech-radar> .legend-1 {
    grid-column: 3;
    grid-row: 1;
  }

  .ledge-tech-radar> .legend-2 {
    grid-column: 3;
    grid-row: 2
  }

  .ledge-tech-radar> .legend-3 {
    grid-column: 1;
    grid-row: 2;
  }
}
